<template>
  <div class="container" :id="pluginId"></div>
</template>

<script>
export default {
  name: 'MonitorScreen',
  data () {
    return {
      login: false,
      // 身份认证
      szDeviceIdentify: '',
      WebVideoCtrl: null,
      // 全局保存当前选中窗口
      g_iWndIndex: 0, // 可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
      g_oLocalConfig: null, // 本地配置
      // 开始录像
      g_szRecordType: '',
      // 监控位置
      position: 1,
      // 通道列表
      channelList: [],
      // 操作信息列表
      opInfoList: []
    }
  },
  mounted () {
    // this.initPlugin()
    setTimeout(() => this.initPlugin(), (this.idx + 1) * 3000)
  },
  beforeDestroy () {
    // 停止预览 => 退出登录
    console.log("beforeDestroy")
    this.clickStopRealPlay()
    this.destoryWindow()
  },
  props: {
    ip: {
      type: String,
      default: ''
    },
    userName: {
      type: String,
      default: ''
    },
    password: {
      type: String,
      default: ''
    },        
    pluginId: {
      type: String,
      default: 'video000'
    },
    idx: {
      type: Number,
      default: 1
    }
  },
  methods: {
    initPlugin () {
      const that = this
      that.login = true
      // 初始化插件参数及插入插件
      window.WebVideoCtrl.I_InitPlugin({
        bWndFull: true, // 是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1, // 窗口分割数，取值为1、2、3、4
        // bNoPlugin: true, // 是否启用无插件
        cbSelWnd (xmlDoc) {
          // 当前选中的窗口
          that.g_iWndIndex = parseInt(
            xmlDoc.querySelector('SelectWnd').textContent,
            10
          )
          const szInfo = '当前选择的窗口编号：' + (that.g_iWndIndex + 1)
          console.log(szInfo)
          // that.showOPInfo(szInfo)
        },
        // cbDoubleClickWnd (iWndIndex, bFullScreen) {
        //   let szInfo = '当前放大的窗口编号：' + (iWndIndex + 1)
        //   if (!bFullScreen) {
        //     szInfo = '当前还原的窗口编号：' + (iWndIndex + 1)
        //   }
        //   that.showOPInfo(szInfo)
        // },
        // cbEvent (iEventType, iParam1, iParam2) {
        //   if (iEventType === 2) {
        //     // 回放正常结束
        //     that.showOPInfo('窗口' + iParam1 + '回放结束！')
        //   } else if (iEventType === -1) {
        //     that.showOPInfo('设备' + iParam1 + '网络错误！')
        //   } else if (iEventType === 3001) {
        //     // that.clickStopRecord(that.g_szRecordType, iParam1)
        //   }
        // },
        cbInitPluginComplete () {
          console.log('初始化完毕后会进入这个回调函数')

          // 初始化完毕以后嵌入插件 => 参数，插件容器的ID
          window.WebVideoCtrl.I_InsertOBJECTPlugin(that.pluginId).then(
            () => {
              // // 监测插件是否最新
              // window.WebVideoCtrl.I_CheckPluginVersion().then(bFlag => {
              //   if (bFlag) {
              //     that.$message.warning(
              //       '检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！'
              //     )
              //   }
              // })
              console.log('嵌入插件成功')
              // 登录
              that.clickLogin()
            },
            err => {
              console.log('err', err)
              that.$message.warning(
                '插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！'
              )
            }
          )
        }
      })

      // 窗口事件绑定
      /* $(window).bind({
            resize () {
              // window.WebVideoCtrl.I_Resize($("body").width(), $("body").height());
            }
          }) */
    },
    // 登录
    clickLogin () {
      // 摄像头的IP端口用户名密码信息
      const szIP = this.ip
      const szPort = '80'
      const szUsername = this.userName
      const szPassword = this.password
      console.log('登录IP:', szIP)

      const that = this
      that.szDeviceIdentify = szIP + '_' + szPort
      window.WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
        timeout: 100, // 请求超时时间
        success (xmlDoc) {
          console.log('xmlDoc', xmlDoc) // 返回的是xml格式的成功提示！
          // 获取通道信息 => 选择camera下拉列表，给下拉列表填充内容
          that.getChannelInfo(that.clickStartRealPlay)
          // 获取设备端口 => 填充了设备端口和RTSP端口信息
          // that.getDevicePort()
          // 开始预览
          // that.clickStartRealPlay()
        },
        error: function (oError) {
          console.log('登录失败:', oError)
        }
      })
    },
    // 获取通道
    getChannelInfo (fb) {
      const that = this
      that.channelList = []

      // 模拟通道
      window.WebVideoCtrl.I_GetAnalogChannelInfo(that.szDeviceIdentify, {
        success: function (xmlDoc) {
          // Promise成功时返回的结果
          console.log('xmlDoc', xmlDoc)
          // 获取指定的 XML 元素
          const oChannels = xmlDoc.getElementsByTagName('VideoInputChannel')
          console.log('获取模拟通道成功！', oChannels)
          // 遍历匹配的元素
          for (let i = 0; i < oChannels.length; i++) {
            const videoInputChannel = oChannels[i]
            // 处理元素
            // console.log('videoInputChannel', videoInputChannel)
            const id = videoInputChannel.querySelector('id').textContent
            let name = videoInputChannel.querySelector('name').textContent
            if (name === '') {
              name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1)
            }
            that.channelList.push({
              id,
              name,
              bZero: false
            })
          }
          // 当前选中的通道号 => 对应的camera
          // console.log('that.channelList', that.channelList)
          that.channel = 1//that.channelList[0].id

          fb && fb()
        },
        error: function (oError) {
          console.log('获取模拟通道失败！', oError)
        }
      })
    },
    // 开始预览
    clickStartRealPlay () {
      const that = this
      // that.g_iWndIndex => 当前选中窗口
      const oWndInfo = window.WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex)
      const iChannelID = that.channel * 1 === 0 ? 0 : that.channel - 1 // 当前选中的摄像头(通道)ID
      const bZeroChannel = false

      // 码流类型，默认选的主码流
      const iStreamType = '1'

      function startRealPlay () {
        /**
           * 开始预览
           * @param {string} deviceIdentify 设备标识（IP_Port）
           * @param {*} options 可选参数对象:
           * * iWndIndex 播放窗口，如果不传，则默认使用当前选择窗口播放（默认选中窗口 0）
           * * iStreamType 码流类型 1-主码流，2-子码流，默认使用主码流预览
           * * iChannelID 播放通道号，默认通道 1
           * * bZeroChannel 是否播放零通道，默认为 false
           * * iPort RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的 RTSP 端口
           * * success 成功回调函数
           * * error 失败回调函数
           */
        window.WebVideoCtrl.I_StartRealPlay(that.szDeviceIdentify, {
          iStreamType, // 默认主码流
          iChannelID: iChannelID, // 目前这里只有传入空字符串或0才能正常显示监控界面
          bZeroChannel, // 是否播放零通道false
          success: function () {
            console.log('开始预览成功！', '通道id', iChannelID)
          },
          error: function (oError) {
            console.log('开始预览失败！', oError, iChannelID)
          }
        })
      }

      if (oWndInfo !== null) {
        // 已经在播放了，先停止
        window.WebVideoCtrl.I_Stop({
          success: function () {
            startRealPlay()
          }
        })
      } else {
        startRealPlay()
      }
    },
    // 显示操作信息
    showOPInfo (szInfo, status, xmlDoc) {
      let szTip =
        this.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss') + ' ' + szInfo
      // console.log('操作信息', szInfo, status, xmlDoc)

      if (typeof status !== 'undefined' && status !== 200) {
        szTip += '(' + status + ')'
      }
      if (typeof xmlDoc !== 'undefined') {
        szTip += ', (' + xmlDoc + ')'
      }
      this.opInfoList.unshift(szTip)
    },
    // 格式化时间
    dateFormat (oDate, fmt) {
      const o = {
        'M+': oDate.getMonth() + 1, // 月份
        'd+': oDate.getDate(), // 日
        'h+': oDate.getHours(), // 小时
        'm+': oDate.getMinutes(), // 分
        's+': oDate.getSeconds(), // 秒
        'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度
        S: oDate.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (oDate.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          )
        }
      }
      return fmt
    },
    // 停止预览
    clickStopRealPlay () {
      const that = this
      const oWndInfo = window.WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex)

      if (oWndInfo != null) {
        window.WebVideoCtrl.I_Stop({
          success: function () {
            console.log(oWndInfo.szDeviceIdentify + '停止预览成功！')
            that.clickLogout()
          },
          error: function (oError) {
            console.log(
              that.szDeviceIdentify + ' 停止预览失败！',
              oError.errorCode,
              oError.errorMsg
            )
          }
        })
      } else {
        that.clickLogout()
      }
    },
    // 退出登录
    clickLogout () {
      window.WebVideoCtrl.I_Logout(this.szDeviceIdentify).then(
        () => {
          console.log(this.szDeviceIdentify + ' ' + '退出成功！')
        },
        () => {
          console.log(this.szDeviceIdentify + ' ' + '退出失败！')
        }
      )
      window.WebVideoCtrl.I_Resize(0, 0)
    },
    // 销毁窗口
    destoryWindow () {
      // console.log('销毁IP:', this.ip)
      // 调用销毁窗口的API => 自己封装的
      window.WebVideoCtrl.I_StopWnd1()
    }
  }
}
</script>

<style  scoped>
.container {
  width: 100%;
  height: 100%;
/* /  // background-color: #8df; */
}
</style>
